<template>
  <div class="app-container">
    <div class="btn">
      <nuxt-link :to="'/ucenter/' + loginInfo.id" class="title">
        <el-button round icon="el-icon-arrow-left"> 返回修改信息 </el-button>
      </nuxt-link>
    </div>
    <div class="password-container">
      <el-card class="box-card">
        <div slot="header" style="height: 30px" class="clearfix">
          <span>修改 {{ loginInfo.nickname }} 的密码</span>
          <el-button
            type="text"
            style="float: right; padding: 3px 0"
            icon="el-icon-check"
            class="sign-in-button"
            @click="submitChange"
            >确认修改</el-button
          >
        </div>
        <el-form ref="userForm" :model="user">
          <el-form-item
            class="input-prepend restyle"
            prop="oldPassword"
            :rules="[
              { required: true, message: '请输入旧密码', trigger: 'blur' },
              { validator: checkPhone, trigger: 'blur' },
            ]"
          >
            <div>
              <el-input
                type="text"
                placeholder="旧密码"
                v-model="user.oldPassword"
                prefix-icon="el-icon-lock"
              />
            </div>
          </el-form-item>

          <el-form-item
            class="input-prepend"
            prop="password"
            :rules="[
              { required: true, message: '请输入新密码', trigger: 'blur' },
            ]"
          >
            <div>
              <el-input
                type="password"
                placeholder="新密码"
                v-model="user.password"
                prefix-icon="el-icon-lock"
              />
            </div>
          </el-form-item>
          <!-- <div class="btn">
          <el-button round class="sign-in-button" @click="submitChange()"
            >修改密码</el-button
          >
        </div> -->
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import "~/assets/css/ucenter.less";
import "~/assets/css/iconfont.css";
import "~/assets/css/global.css";
import cookie from "js-cookie";

import loginApi from "@/api/login";

export default {
  layout: "default",

  data() {
    return {
      token: "",
      loginInfo: {
        id: "",
        avatar: "",
        mobile: "",
        nickname: "",
      },
      user: {
        oldPassword: "",
        password: "",
      },
    };
  },
  created() {
    this.showInfo();
  },

  methods: {
    //创建方法，从cookie获取用户信息
    showInfo() {
      //从cookie获取用户信息
      var userStr = cookie.get("dhu_ucenter");
      // 把字符串转换json对象(js对象)
      if (userStr) {
        this.loginInfo = JSON.parse(userStr);
      }
    },
    submitChange() {
      loginApi.changePassword(this.user).then((response) => {
        if (response.data.success) {
          this.$message.success('修改密码成功,请重新登录');
          cookie.set("dhu_token", "", { domain: "localhost" });
          cookie.set("dhu_ucenter", "", { domain: "localhost" });
          this.$router.push({ path: "/login" });
        }
      });
    },
  },
};
</script>
<style>
.el-form-item__error {
  z-index: 9999999;
}
</style>
